<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div id="app">
			<div class="header">
				<div class="header_top">
					<span>查询条件</span>
				</div>
				<div class="header_bottom">
					<span>物品名称</span>
					<input type="text" class="inp" v-model="inp">
					<span style="margin-left: 100px;">库存状态</span>
					<select class="stock" v-model="stock">
						<option value="" selected></option>
						<option value="充足">充足</option>
						<option value="待补货">待补货</option>
					</select>
					<button type="button" class="query" @click="query">查询</button>
				</div>
			</div>
			<div class="but">
				<button type="button" class="add_item_btn" @click="addItem"><i><img src="images/jia.png" alt=""></i>新增</button>
				<button type="button" class="mod_item_btn" @click="updata"><i><img src="images/bi.png" alt=""></i>修改</button>
				<button type="button" class="del_item_btn" @click="deleteItem"><i><img src="images/cheng.png" alt=""></i>删除</button>
			</div>
			<div class="footer">
				<table >
					<thead>
						<tr>
							<th><input type="checkbox" id="ckall" @change="ckallItem" v-model="ckall"></th>
							<th>物品ID</th>
							<th>物品名称</th>
							<th>单价</th>
							<th>单位</th>
							<th>数量</th>
							<th>库存状态</th>
							<th>库存预警</th>
							<th>创建时间</th>
							<th>修改时间</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in list" :key="item.item_id" v-cloak>
							<td>
								<input type="checkbox" :value="item.item_id" v-model="idzhi" @change="modItem(item)">
							</td>
							<td>{{ item.item_id}}</td>
							<td>{{ item.item_name }}</td>
							<td>{{ item.item_price }}</td>
							<td>{{ item.item_format }}</td>
							<td>{{ item.item_total }}</td>
							<td>{{ item.item_state }}</td>
							<td>{{ item.item_inventory }}</td>
							<td>{{ item.create_time }}</td>
							<td>{{ item.update_time }}</td>
						</tr>
						<!-- <p>{{ idzhi }}</p> -->
					</tbody>
				</table>
			</div>
			<div class="info">
				显示第<span class="first"> 1 </span>到第<span class="end"> {{ size }} </span>条数据，
				总共<span class="total"> {{ total }} </span>条记录，每页显示
				<select class="select_page" v-model="size" @change="changeSize">
					<option value="5"> 5 </option>
					<option value="10" selected> 10 </option>
					<option value="15"> 15 </option>
					<option value ="25"> 25 </option>
				</select>
				条记录
				<ul class="page">
					<li class="prev" @click="getCurr(curr==1?1:curr-1)">prev</li>
					<div class="page-item" style="display: inline-block;" v-for="item in pagenum" @click="getCurr(item)" :class="{active : item==curr?true:false}">
						{{ item }}
					</div>
					<li class="next" @click="getCurr(curr==pagenum?pagenum:curr+1)">next</li>
				</ul>
			</div>
			<div class="add_to" v-show="display" v-cloak>
				<div class="add_to_box">
					<div class="add_to_box_top">
						<span>添加物品</span>
						<img src="images/miss.png" alt="" class="miss" @click="add_miss">
					</div>
					<p>物品名称:</p>
					<input type="text" class="add_item_name" v-model="add_item_name">
					<p>单价(元):</p>
					<input type="text" class="add_item_price" v-model="add_item_price">
					<p>单位:</p>
					<input type="text" class="add_item_format" v-model="add_item_format">
					<p>数量:</p>
					<input type="text" class="add_item_total" v-model="add_item_total">
					<p>库存预警</p>
					<input type="text" class="add_item_inventory" v-model="add_item_inventory">
					<br>
					<div class="add_to_box_bottom">
						<button type="button" class="cancel" @click="add_qu">取消</button>
						<button type="button" class="submit" @click="add_ti">提交</button>
					</div>
				</div>
			</div>
			<div class="modify" v-show="mod_displear" v-cloak>
				<div class="modify_box">
					<div class="modify_box_top">
						<span>修改信息</span>
						<img src="images/miss.png" alt="" class="miss" @click="mod_miss">
					</div>
					<input type="hidden" class="modify_id" >
					<p>物品名称:</p>
					<input type="text" class="modify_name" v-model="modify_name">
					<!-- <p>单价(元):</p>
					<input type="text" class="modify_price" v-model="modify_price"> -->
					<p>单位:</p>
					<input type="text" class="modify_format" v-model="modify_format">
					<p>数量:</p>
					<input type="text" class="modify_quantity" v-model="modify_total">
					<p>库存预警</p>
					<input type="text" class="modify_warning" v-model="modify_inventory">
					<br>
					<div class="modify_box_bottom">
						<button type="button" class="cancel1" @click="cancel1">取消</button>
						<button type="button" class="submit1" @click="submit1">提交</button>
					</div>
				</div>
			</div>
		</div>
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>
